<script setup>
defineOptions({ name: 'IntroductionView' })
// const handlerclick = () => {
//   console.log('click')
// }
</script>

<template>
  <!-- 头部 -->

  <div class="vab">
    <img src="../../assets/image/鲁味飘逸置顶.jpg" alt="">
  </div>
  <div class="introduceTitle">见证鲁味的传奇</div>
  <div class="introduceList">
    <RelicCard @click="$router.push('/introduction/001')" title="红烧肉" desc="肥瘦相间，肥而不腻，香甜松软，营养丰富，入口即化" :imgUrl="getImageUrl('assets/image/红烧肉2.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/002')" title="九转大肠" desc="肥而不腻五味到，香气荡漾舌间绕" :imgUrl="getImageUrl('assets/image/九转大肠2.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/003')" title="辣炒蛤蜊" desc="微微辣味，激发食欲，肉质鲜嫩，滋味浓郁" :imgUrl="getImageUrl('assets/image/辣炒蛤蜊1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/004')" title="豆腐箱" desc="豆皮口感韧劲十足，肉馅则鲜嫩多汁" :imgUrl="getImageUrl('assets/image/豆腐箱1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/005')" title="辣子鸡" desc="一口下去，鲜嫩多汁，唇齿之间，辣味充斥" :imgUrl="getImageUrl('assets/image/辣子鸡1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/006')" title="烟台焖子" desc="一口咬下去，软、糯、香、脆，尽在口中。" :imgUrl="getImageUrl('assets/image/烟台焖子1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/007')" title="朝天锅" desc="营养丰富，味美可口，汤清淡而不浑浊" :imgUrl="getImageUrl('assets/image/朝天锅1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/008')" title="范镇火烧" desc="留在齿间的酥香" :imgUrl="getImageUrl('assets/image/范镇火烧1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/009')" title="葱烧海参" desc="香浓味浓，鲜嫩多汁，入口即化 " :imgUrl="getImageUrl('assets/image/葱烧海参1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/010')" title="棋山炒鸡" desc="色泽红润，干香耐嚼，辣脆可口" :imgUrl="getImageUrl('assets/image/棋山炒鸡1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/011')" title="蒙阴光棍鸡" desc="色泽明亮、味道浓郁、口感佳美、药香四溢" :imgUrl="getImageUrl('assets/image/蒙阴光棍鸡1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/012')" title="高唐老豆腐" desc="嫩而不松、卤清而不淡、油香而不腻" :imgUrl="getImageUrl('assets/image/高唐老豆腐1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/013')" title="单县羊肉汤" desc="色白似奶，水脂交融，鲜而不膻，烂而不黏" :imgUrl="getImageUrl('assets/image/单县羊肉汤1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/014')" title="德州扒鸡" desc="制作独特、肉烂脱骨、色鲜味美" :imgUrl="getImageUrl('assets/image/德州扒鸡1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/015')" title="广饶肴驴肉" desc="天上龙肉，地上驴肉" :imgUrl="getImageUrl('assets/image/广饶肴驴肉1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/016')" title="济宁甏肉" desc="色泽红韵，质地柔嫩，烂而不糜，汤浓味厚，咸香可口" :imgUrl="getImageUrl('assets/image/济宁甏肉1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/017')" title="西施舌" desc="天下第一鲜" :imgUrl="getImageUrl('assets/image/西施舌1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/018')" title="锅子饼" desc="老少皆宜，独树一帜的传统名吃" :imgUrl="getImageUrl('assets/image/锅子饼1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/019')" title="黄焖." desc="爽滑弹牙，汤汁鲜美" :imgUrl="getImageUrl('assets/image/黄焖鸡1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/020')" title="糖醋鲤鱼" desc="色泽金黄，外焦内嫩，酸甜可口，香鲜味美" :imgUrl="getImageUrl('assets/image/糖醋鲤鱼1.jpg')"></RelicCard>
    <RelicCard @click="$router.push('/introduction/021')" title="四喜丸子" desc="福禄寿喜,色香味全" :imgUrl="getImageUrl('assets/image/四喜丸子1.jpg')"></RelicCard>
  </div>

  <AppFooter></AppFooter>
</template>
<style lang="scss" scoped>
img {
  width: 100%;
}

.introduceTitle {
  letter-spacing: 0.2rem;
  font-size: 1.5rem;
  background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  text-align: center;
  background-position: 100%;
  font-size: 50px;
  height: 150px;
  line-height: 150px;
  margin-bottom: 10px;
  -webkit-animation: shine 3s infinite;
  /*设置动画*/

}
.introduceList {
  width: 80vw;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  $margin: 15px;
  & > * {
    width: calc(33.333% - $margin);
    margin-right: $margin;
    margin-bottom: $margin;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}

@-webkit-keyframes shine {

  /*创建动画*/
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 100%;
  }
}

.homePicture {
  width: 60%;
  clear: both;
  display: block;
  margin: auto;

}

.introduceText {
  text-align: center;
  color: rgb(75, 75, 75);
  line-height: 50px;
}
</style>